<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/static/css/base.css">
</head>
<body>
    <h2>这是首页</h2>
    <button id="add">新增学生</button>
    <ul>
        <% for(var i=0;i<stus.length;i++) { %>
        <li>
            <h3>学生姓名：<%= stus[i].stuName %></h3>
            <p>学生年级：<%= stus[i].stuAge %></p>
            <p>学生性别：<%= stus[i].stuGender == 1? '女' : '男'%></p>
            <button data-id="<%= stus[i]._id %>" class="update">将该学生年级修改为30</button>
            <button data-id="<%= stus[i]._id %>" class="del">删除</button>
        </li>
        <%}%>
    </ul>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $('#add').click(function(){
            $.ajax({
                url: '/addStu',
                type: 'post',
                data: {
                    stuName: '学生n',
                    stuAge: 111,
                    stuGender: 0
                },
                success: function(res){
                    if(res.code === 200) {
                        alert(res.msg);
                        // 刷新页面
                        history.go(0);
                    }
                }
            })
        })
        // 更新学生信息
        $('.update').click(function(){
            // 更新就是 这个按钮所在学生 _id
            $.ajax({
                url: '/updateStu',
                data: {
                    id: this.dataset.id,
                    stuAge: 30
                },
                success: function(res){
                    if(res.code === 200) {
                        alert(res.msg);
                        history.go(0);
                    }
                }
            })
        })
         // 删除学生信息
         $('.del').click(function(){
            // 更新就是 这个按钮所在学生 _id
            $.ajax({
                url: '/delStu',
                data: {
                    id: this.dataset.id
                },
                success: function(res){
                   if(res.code === 200) {
                       alert(res.msg);
                       history.go(0);
                   }
                }
            })
        })
    </script>
</body>
</html>